<template>
	<view class="ccontainer cflex cflex_col cflex_items">
		<!--================ 搜索 ================-->
		<view class="indexNav cflex cflex_row cflex_between cflex_items" :style="{paddingTop:statusBarHeight + 42 + 'rpx'}">
			<view class="indexNav-left cflex cflex_row cflex_items">
				<image class="indexNav-leftImage" src="/static/clq-image/index-search-icon.png" mode=""></image>
				<view style="font-size: 28rpx;color: #555;">搜索商品</view>
			</view>
			<image class="indexNav-rightImage" src="/static/clq-image/index-nav-right.png" mode=""></image>
		</view>
		<view class="pageBlock cflex cflex_col cflex_items" :style="{paddingTop:statusBarHeight + 115 + 'rpx'}">
			<!--================ banner ================-->
			<view class="bannerBlock">
				<view class="bannerBG"></view>
				<view class="bannerContent cflex cflex_row cflex_center">
					<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper">
						<block v-for="(item,index) in list.banner" :key="index">
							<swiper-item class="banner">
								<image class="banner" :src="item.image" mode="" @click="previewImage" :data-index="index"></image>
							</swiper-item>
						</block>
					</swiper>
				</view>
			</view>
			
			<!--================ Cate ================-->
			<view class="cateBlock cflex cflex_row cflex_items cflex_wrap">
				<block v-for="(item,index) in list.types" :key="index" v-if="index<10">
					<view class="cateItem cflex cflex_col cflex_items" @click="turnList" data-type="1" :data-typeid="item.type_id">
						<image :src="item.image" mode=""></image>
						<view>{{item.title}}</view>
					</view>
				</block>
			</view>
			
			<!--================ 已下单推送 ================-->
			<view v-if="classType!=2"  class="indexBlock cflex cflex_col">
				<view class="index-title cflex cflex_row cflex_between cflex_items">
					<view class="cflex cflex_row cflex_items">
						<image class="index-title-icon" src="/static/clq-image/index-side-icon1.png" mode=""></image>
						<view>已下单推送</view>
					</view>
					<view class="more-icon cflex cflex_row cflex_items" @click="turnList" data-type="3">
						<view>查看更多</view>
						<image src="/static/clq-image/index-side-icon3.png" mode=""></image>
					</view>
				</view>
				<block v-for="(item,index) in list.bargain_again" :key="index" v-if="index<2">
					<view class="againItem cflex cflex_row cflex_between">
						<image :src="item.images[0]" mode=""></image>
						<view class="cflex cflex_col cflex_1">
							<view class="againItem-name">{{item.name}}</view>
							<view class="againItem-type_name">{{item.type_name}}</view>
							<view class="againItem-factory_price">出厂价：{{item.factory_price}}元</view>
							<view class="againItem-num">起订量：{{item.num}}件</view>
						</view> 
					</view>
				</block>
			</view>
			
			<!--================ 询价推送 ================-->
			
			<view v-if="classType!=2"  class="indexBlock cflex cflex_col">
				<view class="index-title cflex cflex_row cflex_between cflex_items">
					<view class="cflex cflex_row cflex_items">
						<image class="index-title-icon" src="/static/clq-image/index-side-icon1.png" mode=""></image>
						<view>询价推送</view>
					</view>
					<view class="more-icon cflex cflex_row cflex_items" @click="turnList" data-type="2">
						<view>查看更多</view>
						<image src="/static/clq-image/index-side-icon3.png" mode=""></image>
					</view>
				</view>
				<view class="cflex cflex_row cflex_between cflex_items cflex_wrap" style="padding: 33rpx 30rpx 28rpx 30rpx;">
					<block v-for="(item,index) in list.bargain" :key="index" v-if="index<4">
						<view class="bargainItem cflex cflex_col">
							<image :src="item.images[0]" mode=""></image>
							<view class="bargainItem-name">{{item.name}}</view>
							<view class="bargainItem-type_name">{{item.type_name}}</view>
							<view class="bargainItem-factory_price">预计采购数量：{{item.estimate_num}}件</view>
							<view class="bargainItem-num">预算：{{item.estimate}}元</view>
						</view>
					</block>
				</view>
			</view>
			
			<!--================ 商品推送 ================-->
			<view v-if="classType!=1"  class="indexBlock cflex cflex_col">
				<view class="index-title cflex cflex_row cflex_between cflex_items">
					<view class="cflex cflex_row cflex_items">
						<image class="index-title-icon" src="/static/clq-image/index-side-icon1.png" mode=""></image>
						<view>商品推送</view>
					</view>
					<view class="more-icon cflex cflex_row cflex_items" @click="turnPage" data-type="1">
						<view>查看更多</view>
						<image src="/static/clq-image/index-side-icon3.png" mode=""></image>
					</view>
				</view>
				<block v-for="(item,index) in list.goods" :key="index" v-if="index<2">
					<view class="againItem cflex cflex_row cflex_between">
						<image :src="item.images[0]" mode=""></image>
						<view class="cflex cflex_col cflex_1">
							<view class="againItem-name">{{item.name}}</view>
							<view class="againItem-type_name">{{item.type_name}}</view>
							<view class="againItem-factory_price">出厂价：{{item.factory_price}}元</view>
							<view class="againItem-num">起订量：{{item.num}}件</view>
						</view>
					</view>
				</block>
			</view>
			<view style="height: 118rpx;"></view>
		</view>
		
		
		
		<uniTabBar1 :current="currentIndex" style="z-index:999;" v-if="classType==1 || classType==3" />
		<uniTabBar2 :current="currentIndex" style="z-index:999;" v-if="classType==2 || classType==4" />
	</view>
</template>

<script>
	import {
		ajax
	} from '../../ajax.js';
	import uniTabBar1 from '../../components/uni-tabBar1';
	import uniTabBar2 from '../../components/uni-tabBar1';
	export default {
		components: {
			uniTabBar1,
			uniTabBar2
		},
		data() {
			return {
				statusBarHeight: '',
				classType: '',
				currentIndex:0,
				list:{}
			}
		},
		onShow: function() {
			let that = this
			that.classType = uni.getStorageSync('class')
			uni.getSystemInfo({
				success: function(res) {
					console.log(res)
					let statusBarHeight = parseFloat(res.statusBarHeight * 2)
					that.statusBarHeight = statusBarHeight
				}
			})
			if(!uni.getStorageSync('token')){
				uni.reLaunch({
					url:'/pages/clq_about/index/index'
				})
			}else{
				that.getList()
			}
		},
		onLoad() {
			let that = this
		},
		methods: {
			previewImage: function(e) {
				let that = this;
				
			},
			turnList(e){
				let type = e.currentTarget.dataset.type
				uni.navigateTo({
					url:"/pages/supperList/supperList?type=" + type
				})
			},
			turnPage(e){
				let type = e.currentTarget.dataset.type
				if(type == 1){
					let typeid = e.currentTarget.dataset.typeid
					console.log('typeid',typeid)
					uni.navigateTo({
						url:"/pages/category1/category1?typeid=" + typeid
					})
				}else if(type == 1){
					
				}
			},
			getList() {
				let that = this
				uni.showLoading({
					title: "加载中"
				})
				ajax({
					url: 'goods',
					data: {
						token:uni.getStorageSync('token')
					},
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					method: 'POST',
					success: function(res) {
						uni.hideLoading()
						let result = res.data.data
						if (res.data.code == 1) {
							that.list = result
							console.log('that.list', that.list);
						}else if(res.data.code == 0){
							uni.showToast({
								title: res.data.msg,
								duration: 1500,
								icon: 'none'
							});
						}else if(res.data.code == -1){
							uni.reLaunch({
								url:'/pages/clq_login/clq_login'
							})
						}else if(res.data.code == -2){
							uni.showToast({
								title: res.data.msg,
								duration: 1500,
								icon: 'none'
							});
						}
					},
					error: function() {
						uni.showToast({
							title: res.data.msg,
							duration: 1500,
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style>
	page{
		background-color: #f7f7f7;
	}
	.pageBlock{
		width: 100%;
		box-sizing: border-box;
	}
	/*===================搜索 ===================*/
	.indexNav {
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx 25rpx 50rpx;
		background-color: #FF7427;
		position: fixed;
		top: 0;
		z-index: 999;
	}

	.indexNav-rightImage {
		width: 44rpx;
		height: 44rpx;
	}

	.indexNav-left {
		width: 580rpx;
		height: 56rpx;
		background: #fff;
		border-radius: 28rpx;
	}

	.indexNav-leftImage {
		width: 38rpx;
		height: 38rpx;
		margin: 0 33rpx 0 19rpx;
	}
	
	/*================= banner =================*/
	
	.bannerBlock{
		width: 100%;
		box-sizing: border-box;
		height: 325rpx;
		position: relative;
	}
	.bannerBG{
		width: 100%;
		box-sizing: border-box;
		height: 215rpx;
		background-color: #FF7427;
	}
	.bannerContent{
		width: 100%;
		box-sizing: border-box;
		position: absolute;
		top: 0;
		padding-top: 5rpx;
	}
	.swiper{
		width: 710rpx;
		height: 320rpx;
		border-radius: 20rpx;
	}
	.banner{
		width: 710rpx;
		height: 320rpx;
		border-radius: 20rpx;
	}
	
	/*================= cate =================*/
	.cateBlock{
		width: 100%;
		box-sizing: border-box;
	}
	.cateItem{
		font-size: 26rpx;
		font-weight: 500;
		color: #000000;
		margin: 30rpx 25rpx;
	}
	.cateItem image{
		width: 98rpx;
		height: 98rpx;
		margin-bottom: 26rpx;
		border-radius: 100%;
	}
	
	/* =============================================== */
	.indexBlock{
		width: 712rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin-bottom: 22rpx;
	}
	.index-title{
		width: 100%;
		box-sizing: border-box;
		padding: 0 17rpx 0 10rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
		margin-top: 26rpx;
	}
	.index-title-icon{
		width: 30rpx;
		height: 30rpx;
		margin-right: 18rpx;
	}
	.more-icon{
		font-size: 24rpx;
		font-weight: 500;
		color: #555555;
	}
	.more-icon image{
		width: 28rpx;
		height: 28rpx;
		margin-left: 15rpx;
	}
	/* ======================================== */
	.againItem{
		width: 100%;
		box-sizing: border-box;
		padding: 32rpx 25rpx 25rpx 27rpx;
		border-bottom: 1rpx solid #f7f7f7;
	}
	.againItem image{
		width: 210rpx;
		height: 210rpx;
		background: #999999;
		border-radius: 12rpx;
		margin-right: 56rpx;
	}
	.againItem-name{
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.againItem-type_name{
		font-size: 24rpx;
		font-weight: 500;
		color: #555555;
		margin: 10rpx 0 18rpx 0;
	}
	.againItem-factory_price{
		font-size: 28rpx;
		font-weight: 500;
		color: #d50000;
	}
	.againItem-num{
		font-size: 28rpx;
		font-weight: 500;
		color: #555555;
		margin-top: 17rpx;
	}
	/* =========================================== */
	.bargainItem{
		width: 320rpx;
		height: 460rpx;
		margin-bottom: 22rpx;
	}
	.bargainItem image{
		width: 320rpx;
		height: 276rpx;
		border-radius: 20rpx 20rpx 0 0;
	}
	.bargainItem-name{
		margin: 10rpx 0;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.bargainItem-type_name{
		font-size: 24rpx;
		font-weight: 500;
		color: #555555;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.bargainItem-factory_price{
		margin: 21rpx 0 19rpx 0;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
	}
	.bargainItem-num{
		font-size: 24rpx;
		font-weight: 500;
		color: #ff7427;
	}
</style>
